<template>
  	<div>
  		<div class="main-body">
  			<h3 class="main-body__title text-left">
  				应用概览
  			</h3>
  			<div class="main-body__content text-left">
  				<div class="main-body__module">
  					<h4 class="main-body__module-title">
  						<i class="fa fa-circle"></i>
  						应用详情
  					</h4>
  					<div class="main-body__module-body">
  						<div class="row">
  							<div class="col-sm-4">
  								<div class="overview-info clearfix">
  									<span class="pull-left overview-info__name">AppId</span>
  									<p class="overview-info__text">12345667777</p>
  								</div>
  							</div>
  							<div class="col-sm-4">
  								<div class="overview-info clearfix">
  									<span class="pull-left overview-info__name">Secret</span>
  									<p class="overview-info__text">12345667777</p>
  								</div>
  							</div>
  							<div class="col-sm-4">
  								<div class="overview-info clearfix">
  									<span class="pull-left overview-info__name">支付渠道</span>
  									<p class="overview-info__text">已审核</p>
  								</div>
  							</div>
  						</div>
  					</div>
  				</div>
  				<div class="main-body__module">
  					<h4 class="main-body__module-title">
  						<i class="fa fa-circle"></i>
  						交易数据概览
  					</h4>
  					<div class="main-body__module-body text-center">
  						<div class="trade">
  							<p class="trade-name">全部交易</p>
  							<div class="clearfix trade-info">
  								<div class="col-md-4">
  									<p class="trade-info__name">总交易额（万元）</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">可用余额（万元）</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">冻结余额（万元）</p>
  									<p class="trade-info__num">10000</p>
  								</div>
								<div class="col-md-4">
  									<p class="trade-info__name">总交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">成功交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">转化率</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  							</div>
  						</div>
  						<div class="trade">
  							<p class="trade-name">
  								今日交易
  							</p>
  							<div class="trade-select">
  								<a class="trade-select--back"><i class="fa fa-angle-left"></i></a>
  								<a class="trade-select--ahead"><i class="fa fa-angle-right"></i></a>
  								<div class="trade-select__input">
                      <datepicker placetext="请选择时间" v-model="trade_time"></datepicker>
  								</div>
  							</div>
  							<div class="clearfix trade-info">
  								<div class="col-md-4">
  									<p class="trade-info__name">日交易额（万元）</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">日交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">成功交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
								<div class="col-md-4">
  									<p class="trade-info__name">总交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">成功交易笔数</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  								<div class="col-md-4">
  									<p class="trade-info__name">转化率</p>
  									<p class="trade-info__num">10000</p>
  								</div>
  							</div>
  						</div>
  					</div>
  				</div>
  				<div class="main-body__module">
  					<h4 class="main-body__module-title">
  						<i class="fa fa-circle"></i>
  						今日交易曲线
  					</h4>
  					<div class="main-body__module-body">
  						<div class="chart">
                  <chartComponent></chartComponent>      
              </div>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>
</template>
<script>
  import chartComponent from './trade-chart'
  import datepicker from './datepicker'

  export default {
    name:'overview',
    data(){
      return {
        trade_time:''
      }
    },
    components:{
      chartComponent,
      datepicker
    },
    watch:{
      trade_time(){
        console.log( this );
      }
    },
    mounted(){
    }
  }
</script>
<style lang="less">

	@import '../../assets/style/color';
	@import '../../assets/style/font';

  	.main-body{
  		>.main-body__title{
        position: relative;
  			line-height: 65px;
  			text-indent: 34px;
  			border-bottom:1px solid @cl_d9d9d9;
  			font-size:16px;
  			color:@cl_444;
  			padding:0;
  			margin:0;
        >.btn-area{
          position: absolute;
          right: 34px;
          top:0;
          >.btn{
            margin-right: 15px;
            &:last-child{
              margin-right: 0;
            }
          }
        }
  		}
  		.main-body__content{
  			padding:20px 34px;
  			h4{
  				padding:0;
  				margin:0;
  				font-weight: normal;
  			}
  		}
  		.main-body__module{
  			margin-bottom:34px;
  			>.main-body__module-title{
  				font-size:16px;
  				line-height: 45px;
  				color:@cl_444;
  			}
  			.fa{
  				font-size:14px;
  				color:@cl_d9d9d9;
  				margin-right: 17px;
  			}
  		}
  		.overview-info{
  			position: relative;
  			font-size:14px;
  			border:1px solid @cl_d9d9d9;
  			border-radius: 2px;
  			>.overview-info__name{
  				line-height: 45px;
  				width:100px;
  				text-align: center;
  				background: @cl_d9d9d9;
  			}
  			>.overview-info__text{
  				overflow: hidden;
  				line-height: 45px;
  				color:@cl_2b98f0;
  				text-align: center;
  			}
  		}
  		.trade{
  			margin-bottom:39px;
  			position: relative;
  			>.trade-name{
  				text-align: center;
  				width:280px;
  				height: 45px;
  				line-height: 45px;
  				font-size:16px;
  				color:@cl_999;
  				border:1px solid @cl_f0f0f0;
  				border-bottom:none;
  			}
  			>.trade-info{
  				color:@cl_999;
  				border-top:1px solid @cl_f0f0f0;
  				border-bottom:1px solid @cl_f0f0f0;
  				.trade-info__name{
  					font-size:16px;
  					line-height: 1.375;
  					margin:10px 0 29px 0;
  				}
  				.trade-info__num{
  					font-style: 22px;
  					line-height: 1.15;
  					margin-bottom:18px;
  				}
  			}
  			>.trade-select{
  				position: absolute;
  				top:0;
  				left: 50%;
  				width:280px;
  				margin-left: -140px;
  				border:1px solid @cl_f0f0f0;
  				border-bottom:none;
  				>.trade-select--back{
  					position: absolute;
  					left:10px;
  					top:15px;
  				}
  				>.trade-select--ahead{
  					position: absolute;
  					right:10px;
  					top:15px;
            >.fa{
              margin-right: 0;
            }
  				}
  				.fa{
  					color:@cl_444;
  				}
  				>.trade-select__input{
  					line-height: 45px;
  					font-size:16px;
  					color:@cl_999;
            >.form-control{
              border:none;
              background: transparent;
              text-align: center;
            }
  				}
  			}
  		}
  		.chart{
  			width:100%;
  			height: 308px;
  			background: #f0f0f0;
  		}
  	}
</style>